<template>
  <div class="Detailspecific">
    <div v-show="activeIndex == 1" class="first">
        <span v-html="Detailimg" class="Richtext"></span>
    </div>

    <div v-show="activeIndex == 2" class="second">
      <div class="secondtitle">
        <p>售后保障</p>
      </div>

      <div class="goodsdiv">
        <ul>
          <li v-for="(item, i) in aftersalelist" :key="i">
            <i :class="item.class"> </i>
            <span class="goodstitle">{{ item.title }}</span>
            <br />
            <span class="goodscontent">{{ item.value }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div v-show="activeIndex == 3" class="third">
      <div class="thirdtitle">
        <p>商品评价</p>
      </div>

      <div v-for="(item, index) in Detailcomment" :key="index" class="allcomment">
        <div class="userinfo">
          <el-image class="avatar" :src="item.avatar"></el-image>
          <span>{{ item.username }}</span>
        </div>
        <div class="comment">
          <div class="commentcontent">
            {{ item.commentDetails }}
          </div>
          <div class="comment-time">{{ item.commentTime }}</div>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script>
import { getGoodsDetail, getProductComment } from "@/apis/getData.js";
import { useRoute } from 'vue-router'
import { onMounted, ref } from "vue";
export default {
  setup() {
    const Detailimg = ref("");
    const Detailcomment = ref("");


    onMounted(() => {
       const route = useRoute();
       const gid=route.query.gid;
      getGoodsDetail(gid).then((res) => {
        Detailimg.value = res.data.data.goodsDetail;
      });

      //获取商品评论
      getProductComment({gid:gid}).then((res) => {
        Detailcomment.value = res.data.data;
      });


    });
    return { Detailimg, Detailcomment};
  },
  props: {
    activeIndex: Number,
  },
  data() {
    return {
      value1: 5,
      aftersalelist: [
        {
          class: "goods",
          title: "商家保证",
          value:
            "本商品质保周期为1年质保，在此时间范围内可提交维修申请，具体请以厂家服务为准。 如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！",
        },
        {
          class: "secondgoods",
          title: "正品行货",
          value:
            "商城向您保证所售商品均为正品行货，商城自营商品开具机打发票或电子发票。",
        },
        {
          class: "lastgoods",
          title: "无忧退款",
          value:
            "客户购买自营商品7日内（含7日，自客户收到商品之日起计算），在保证商品完好的前提下，可无理由退货。",
        },
      ],
    };
  },
};
</script>
<style scoped>

.first .Richtext {
  margin: 0 auto;
  padding-top: 100px;
  text-align: center;
}


.first .Richtext >>> ul{
  padding: 50px 0px 55px;
  list-style: none;
  text-align: left;
  overflow: hidden;
  margin: 0;
}

.first .Richtext >>> li {
  width: 22%;
  padding-left: 11%;
  float: left;
  margin-bottom: 5px;
}

.second .secondtitle {
  font-size: 24px;
  margin-top: 10px;
  padding: 15px;
  text-indent: 1em;
  background-color: rgb(245, 245, 245);
}

.second .goodsdiv {
  padding: 10px;
  margin-top: 30px;
}

.second .goodsdiv ul {
  list-style: none;
}

.second .goodsdiv i {
  height: 32px;
  background-image: url("https://static.360buyimg.com/item/unite/1.0.131/components/default-soa/detail/i/__sprite.png");
  width: 32px;
  display: inline-block;
  line-height: 32px;
  margin-right: 10px;
  vertical-align: bottom;
}

.second .goodsdiv .goodstitle {
  line-height: 32px;
  margin-left: 6px;
  font-size: 18px;
  font-weight: bolder;
  color: red;
}

.second .goodsdiv .goodscontent {
  padding-top: 10px;
  padding-bottom: 30px;
  display: block;
  text-indent: 3em;
}

.goods {
  background-position: -32px -75px;
}

.secondgoods {
  background-position: -64px -75px;
}

.lastgoods {
  background-position: 0px -75px;
}

.third .allcomment{
  border-bottom: 1px gainsboro solid;
  margin-top: 30px;
}

.third .thirdtitle {
  font-size: 18px;
  margin-top: 10px;
  padding: 15px;
  margin-bottom: 50px;
  background-color: rgb(245, 245, 245);
}

.third .userinfo {
  margin-left: 10px;
  width: 140px;
  height: 25px;
  line-height: 25px;
  float: left;
}

.third .userinfo .avatar {
  border-radius: 50%;
  line-height: 25px;
  width: 25px;
  height: 25px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: bottom;
}

.third .comment {
  margin-left: 150px;
}
.third .comment .commentcontent {
  padding: 10px 0;
  line-height: 180%;
  color: #333;
}

.smallimg {
  cursor: pointer;
  width: 52px;
  height: 52px;
  border: 1px solid #e2e2e2;
  padding: 1px;
  margin-right: 6px;
}

.smallimg :active{
  border:1px solid red;
}

.bigimgdiv {
  width: 400px;
  height: 480px;
  padding-top: 20px;
}

.bigimg {
  max-width: 370px;
  max-height: 478px;
  border: 0;
  vertical-align: middle;
}

.comment-time {
  color: gray;
  padding-bottom: 30px;
}
</style>